import React, { useState, useEffect } from 'react';
import request from '@/services/request';
import styles from './index.less';

const itemStyle = { paddingRight: 8 };

const Weather = ({ city = '无锡' }) => {
  const [weather, setWeather] = useState();
  const [temperature, setTemperature] = useState();
  useEffect(() => {
    let _city = encodeURIComponent(city);
    try {
      if (sessionStorage.getItem(_city) && process.env.NODE_ENV === 'development') {
        let data = JSON.parse(sessionStorage.getItem(_city));
        setWeather(data.weather);
        setTemperature(data.temperature);
        return;
      }
    } catch (error) {}

    request(`https://portal.wccg.tech:9002/weather/?city=${_city}`, { method: 'GET' }).then(
    // request(`https://dev.arcgisonline.cn/weather/?city=${_city}`, { method: 'GET' }).then(
      ({ data }) => {
        try {
          setWeather(data.data.weather);
          setTemperature(data.data.temperature);
          sessionStorage.setItem(_city, JSON.stringify(data.data));
        } catch (error) {
          setWeather('--');
          setTemperature('--');
        }
      },
    );
  }, []);
  return (
    <span className={styles.weather}>
    <div className={styles.weatherInner}>

      <span className={styles.city}>{city}</span>

      <div className={styles.weatherR}>
        <div className={styles.temp} style={itemStyle}>
          {temperature}
        </div>
        <div className={styles.data} style={itemStyle}>
          {weather}
        </div>
      </div>
    </div>
    </span>
  );
};

export default Weather;
